<template>
  <div class="friendSearch">
      <div class="top">
           <yl-search :submit="search" :ylstyle="searchStyle" @getValue="getMobile"></yl-search>
            <div class="cancel" @touchend="cancel">取消</div>
      </div>
         <button @touchend="saoQr">扫一扫添加好友</button>
         <p style="text-align:center;margin-top:.5rem;color:red;font-size:14px;">注意：扫二维码目前仅支持添加亲友</p>
  </div>
</template>
<script>
import ylSearch from '@/components/search'
export default {
    data(){
        return{
             searchStyle:{
                height:'1',//高度，必须
                bgcolor:'#FFB36E',//背景，可选
                remind:'请输入电话号码搜索想找的人',//placeholder可选
                close:false, //开关 可选
            },
            mobilephone:'',//电话号码
        }
    },
    computed:{
        status(){
            return this.$store.state.addorfo
        }
    },
    components:{
        ylSearch
    },
    methods:{
         search(e){//搜索
            e.preventDefault()
            let data={
                myphone:localStorage.myphone,
                mobilephone:this.mobilephone,
                userId:localStorage.userid,
            }
            let reg=/^[1][3,4,5,7,8][0-9]{9}$/;
            if(!reg.test(this.mobilephone)){
                this.$dialog.alert({mes:"请输入正确电话号码"})
            }else if(this.mobilephone.length==0){
                this.$dialog.alert({mes:"电话号码不能为空"})
            }else{
                    this.ylAjax.searchFriend(data)//请求查找用户进行添加好友
                        .then(res=>{
                            this.$dialog.loading.open('搜索中');
                            if(res.state==0){//如果查询成功，将查询数据存vuex,然后跳转
                                let a=res.data.user;
                                a.status1=res.data.statu1;
                                a.status2=res.data.statu2;
                                this.$store.commit("userDetail",a)
                                this.$store.commit("stateWrite",null)
                                this.$store.commit('searchPhone',this.mobilephone)
                                this.$dialog.loading.close();
                                setTimeout(()=>{
                                    this.$router.push({path:'/common/userIntr',query:{status:'add'}})
                                },500)
                            }else if(res.state==2){//查询失败 返回失败提示信息
                                this.$dialog.alert({mes:res.message})
                                setTimeout(() => {
                                    this.$dialog.loading.close();
                                }, 1000);
                            }else{
                                this.$dialog.alert({mes:"查不到该用户，请检查号码"})
                            setTimeout(() => {
                                this.$dialog.loading.close();
                            }, 1000);
                            }
                            })
                        .catch(error=>{
                            throw error
                        })
            }

        },
        getMobile(data){
            this.mobilephone=data;
        },
        cancel(){//取消
            if(this.status.type=="friend"){
                this.$router.push({path:'/chat'})
            }else if(this.status.type=="focus"){
                this.$router.push({path:"/focus"})
            }
        },
        saoQr(){
          this.$router.push({name:"qr"})
      }
    },
//   activated(){
//       console.log(1111)
//   }
}
</script>
<style lang="less" scoped>
    @import "~less/base";
    .friendSearch{
        .top{
            position: relative;
            .cancel{
                position: absolute;
                right:0;
                letter-spacing: 2px;
                padding: 0 .2rem;
                top: 0;
                line-height: 1rem;
                color: @release-btnBg;
            }
        }
        button{
            margin-top: .9rem;
            width: 80%;
            line-height: 1rem;
            margin-left: 10%;
            border: 0;
            background-color: @color-btn1;
            color: @release-btnBg;
            font-size: 16px;
            border-radius: 10px;
        }
    }
</style>

